<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>完整版</title>
    <style>
    a{
        color: inherit;
        font-size: inherit;
        text-decoration: none;
    }
    *{
        box-sizing: border-box;
    }
    .box{
        display: flex;
    }
    .box>div{
        margin-left: 10px;
        position: relative;
    }
    a{
        display: inline-block;
        width: 19px;
        height: 19px; 
        background-image: url('./img/22.png');
        background-position: 0 0;
    }
    a.active{
        background-image: url('./img/22.png');
        background-position: 0 -28px;
    }
    .box>div:hover .pingyu{
        display: block;
    }
    .pingyu{
        width: 150px;
        border: 1px solid red;
        font-size: 12px;
        position: absolute;
        left: 0;
        top: 25px;
        display: none;
    }
    </style>
</head>

<body>
    <div class="box">
        <span>宝贝与描述相符</span>
        <div>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <div class="pingyu"></div>
        </div>
        <span class="result"></span>
        
    </div>

    <script src="./js/jquery.js"></script>
</body>

</html>
<script>
    function showStart(count){
        for(var i = 0; i < $('a').length;i++){
            if(i<count){
                $('a').eq(i).addClass('active');
            }else{
                $('a').eq(i).removeClass('active');
            }   
        } 
    }
    var score = 0;
    $('a').hover(function(){
        showStart($(this).index()+1);
        var left = $(this).offset().left-130;
        $('.pingyu').css('left',left+'px');
        var amsg = msg[$(this).index()]; 
        $('.pingyu').html('<strong style ="color:red">'+($(this).index()+1)+'分'+ amsg.split('|')[0]+'</strong><br>'+amsg.split('|')[1]);
        $('a').click(function(){
            score = $(this).index()+1;
            $('.result').html('<strong style ="color:red">&#x3000;'+score+'分</strong>'+amsg.split('|')[1]);
        });
    },function(){
        showStart(score);
    });

    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
</script>
